<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Bootstrap中文网</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。">
  <meta name="keywords" content="Bootstrap,CSS,CSS框架,CSS framework,javascript,bootcss,bootstrap开发,bootstrap代码,bootstrap入门">
  <meta name="author" content="Bootstrap中文网">
  <meta name="robots" content="index,follow">
  <meta name="application-name" content="bootcss.com">
  <meta property="qc:admins" content="1246104622627743336375" />

  <!-- Site CSS -->
  <link href="http://cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://static.bootcss.com/www/assets/css/site.min.css" rel="stylesheet">

  <!-- Extras CSS -->


  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Favicons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://static.bootcss.com/www/assets/ico/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="http://static.bootcss.com/www/assets/ico/favicon.png">

  <script>
    var _hmt = _hmt || [];
  </script>
<body>



    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand hidden-sm" href="/">Bootstrap中文网</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="/">首页</a></li>
            <li class="dropdown">
              <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap2中文文档<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li class="">
                  <a href="http://v2.bootcss.com/getting-started.html" target="_blank">起步</a>
                </li>
                <li class="">
                  <a href="http://v2.bootcss.com/scaffolding.html" target="_blank">脚手架</a>
                </li>
                <li class="">
                  <a href="http://v2.bootcss.com/base-css.html" target="_blank">基本CSS样式</a>
                </li>
                <li class="">
                  <a href="http://v2.bootcss.com/components.html" target="_blank">组件</a>
                </li>
                <li class="">
                  <a href="http://v2.bootcss.com/javascript.html" target="_blank">JavaScript插件</a>
                </li>
                <li class="">
                  <a href="http://v2.bootcss.com/customize.html" target="_blank">定制</a>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Bootstrap3中文文档<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="http://v3.bootcss.com/getting-started/" target="_blank">起步</a>
                </li>
                <li>
                  <a href="http://v3.bootcss.com/css/" target="_blank">CSS</a>
                </li>
                <li>
                  <a href="http://v3.bootcss.com/components/" target="_blank">组件</a>
                </li>
                <li>
                  <a href="http://v3.bootcss.com/javascript/" target="_blank">JavaScript插件</a>
                </li>
                <li>
                  <a href="http://v3.bootcss.com/customize/" target="_blank">定制</a>
                </li>
              </ul>
            </li>
            <li><a href="/p/lesscss/" target="_blank">Less 教程</a></li>
            <li><a href="http://jquery.bootcss.com/" target="_blank">jQuery API</a></li>
            <li><a href="http://expo.bootcss.com" target="_blank">网站实例</a></li>
            <li><a href="about.html">关于</a></li>
          </ul>
        </div>
      </div>
    </div>


<!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <!-- Indicators 
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol> -->
      <div class="carousel-inner">
        <div class="item active masthead">
          <div class="masthead-bg"></div>
          <div class="container">
            <div class="carousel-caption">
              <h1>Bootstrap</h1>
              <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
              <p>
                <a class="btn btn-lg btn-primary btn-shadow bs3-link" href="http://v3.bootcss.com/" target="_blank" role="button">Bootstrap3中文文档(v3.0.3)</a>
              </p>

                <a class="bs2-link" href="http://v2.bootcss.com/" target="_blank" role="button">Bootstrap2中文文档(v2.3.2)</a>

            </div>
          </div>
        </div>
      </div>
      <!-- <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> -->
    </div><!-- /.carousel -->


    <div class="bc-social">
    <div class="container">
      <ul class="bc-social-buttons">
        <li>
          <span class="label label-success">Bootstrap开发QQ群:</span><del style="display:none;">284095795(已满)、272512220(已满)、277196980(已满)、206172475(已满)、299037589(已满)、367987695(已满)、295636729（已满）、133744974（已满）、254389549（已满）、340341281（已满）、254389549（已满）、112560384（已满）、177562758（已满）、248557313（已满）、317170956（已满）、159566374（已满）、136374923（已满）、302483032（已满）、311838185（已满）、38012881（已满）、240924764（已满）、288366158（已满）、325405953（已满）、318278283（已满）、150643228（已满）、342343389（已满）、 232693934（已满）、40924764（已满）、308012987（已满）、366302113（已满）、204114414（已满）、332646374（已满）、 </del>115811661
        </li>
        <li>
          <a href="http://weibo.com/bootcss" title="Bootstrap中文网官方微博" target="_blank"><img src="http://static.bootcss.com/www/assets/img/Sina_Weibo_Logo_RGB_C_E.png" style="height: 30px;" alt="Bootstrap中文网新浪微博"></a>
        </li>
      </ul>
    </div>
  </div>


    <div class="container projects">

      <div class="projects-header page-header">
        <h2>Bootstrap相关开源项目推荐</h2>
        <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap的</p>
      </div>

      <div class="row">

      	<div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="http://codeguide.bootcss.com" title="Bootstrap 编码规范" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'codeguide'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/codeguide.png" alt="Headroom.js"></a>
            <div class="caption">
              <h3> 
                <a href="http://codeguide.bootcss.com" title="Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'codeguide'])">Bootstrap 编码规范<br><small>by @mdo</small></a>
              </h3>
              <p>
              Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/headroom.js/" title="Headroom.js 是一个轻量级、纯 JS 组件，用来隐藏或展现页面上的元素，为你的页面留下更多展示内容的空间。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'headroom'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/headroom.png" alt="Headroom.js"></a>
            <div class="caption">
              <h3> 
                <a href="/p/headroom.js/" title="Headroom.js 是一个轻量级、纯 JS 组件，用来隐藏或展现页面上的元素，为你的页面留下更多展示内容的空间。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'headroom'])">Headroom.js<br><small>隐藏或展示页面元素</small></a>
              </h3>
              <p>
              Headroom.js 是一个轻量级、纯 JavaScript 组件，用来隐藏或展现页面上的元素，为你的页面留下更多展示内容的空间。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="http://open.bootcss.com/" title="Bootstrap中文网开放CDN服务" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'opencdn'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/opencdn.png" alt="Open CDN"></a>
            <div class="caption">
              <h3> 
                <a href="http://open.bootcss.com/" title="Bootstrap中文网开放CDN服务" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'opencdn'])">Open CDN<br><small>开放CDN服务</small></a>
              </h3>
              <p>Bootstrap中文网联合又拍云存储共同推出了开放CDN服务，我们对广泛的前端开源库提供了稳定的存储和带宽的支持，例如Bootstrap、jQuery等。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/stickup/" title="stickUp能让页面目标元素“固定”在浏览器窗口的顶部" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'stickup'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/stickup.png" alt="stickUp"></a>
            <div class="caption">
              <h3> 
                <a href="/p/stickup/" title="stickUp能让页面目标元素“固定”在浏览器窗口的顶部" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'stickup'])">stickUp<br><small>让页面元素“固定”位置</small></a>
              </h3>
              <p>
              stickUp能让页面目标元素“固定”在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/lesscss/" title="LESS一种动态样式语言" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'lesscss'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/lesscss.png" alt="LESSCSS"></a>
            <div class="caption">
              <h3> 
                <a href="/p/lesscss/" title="Grunt是基于Node.js的项目构建工具。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'lesscss'])">LESS<br><small>一种动态样式语言</small></a>
              </h3>
              <p>
              LESS为CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox)，也可以借助Node.js或者Rhino在服务端运行。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="http://www.gruntjs.net" title="Grunt是基于Node.js的项目构建工具。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grunt'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/gruntjs.png" alt="Grunt"></a>
            <div class="caption">
              <h3> 
                <a href="http://www.gruntjs.net" title="Grunt是基于Node.js的项目构建工具。" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grunt'])">Grunt<br><small>项目构建工具</small></a>
              </h3>
              <p>
              Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件，几乎任何你所要做的事情都可以用Grunt实现。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/buttons/" title="基于 Sass 和 Compass 构建的CSS按钮（button）样式库" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'button'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/buttons.png" alt="Buttons"></a>
            <div class="caption">
              <h3> 
                <a href="/p/buttons/" title="基于 Sass 和 Compass 构建的CSS按钮（button）样式库" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'button'])">Buttons<br><small>CSS按钮样式库</small></a>
              </h3>
              <p>
              Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮（button）样式库，图标采用的是<a href="/p/font-awesome/" target="_blank">Font Awesome</a>，可以和Bootstrap融合使用。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
          <a href="/p/layoutit/" title="Bootstrap可视化布局系统" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'layoutit'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/layoutit.png" alt="Layoutit"></a>
            <div class="caption">
              <h3> 
                <a href="/p/layoutit/" title="Bootstrap可视化布局系统" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'layoutit'])">LayoutIt!<br><small>Bootstrap可视化布局</small></a>
              </h3>
              <p>
              LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由<a href="https://github.com/dodgepudding" target="_blank">4wer</a>同学汉化整理。
              </p>
            </div>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/unslider/" title="Unslider" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'unslider'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/unslider.png" alt="Unslider"></a>
            <div class="caption">
              <h3> 
                <a href="/p/unslider/" title="Unslider" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'unslider'])">Unslider<br><small>jQuery轮播插件</small></a>
              </h3>
              <p>
              Unslider &mdash; 一个超小的 jQuery 轮播（slider） 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。
              </p>
            </div>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/bootstrap-switch/" title="Bootstrap Switch" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'switch'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/bootstrap-switch.png" alt="Bootstrap Switch"></a>
            <div class="caption">
              <h3> 
                <a href="/p/bootstrap-switch/" title="Bootstrap Switch" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'switch'])">Bootstrap Switch<br><small>Bootstrap开关组件</small></a>
              </h3>
              <p>
              Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。
              </p>
            </div>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/sco.js/" title="Sco.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'sco'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/sco.js.png" alt="Sco.js"></a>
            <div class="caption">
              <h3> 
                <a href="/p/sco.js/" title="Sco.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'sco'])">Sco.js<br><small>Bootstrap组件增强版</small></a>
              </h3>
              <p>
              由于大部分的Bootstrap js插件是无法扩展的，因此才有了sco.js，它是对Bootsrap中js插件的增强实现。
              </p>
            </div>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/icheck/" title="iCheck" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'icheck'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/icheck.png" alt="iCheck"></a>
            <div class="caption">
              <h3> 
                <a href="/p/icheck/" title="iCheck" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'icheck'])">iCheck<br><small>增强复选框和单选按钮</small></a>
              </h3>
              <p>
              iCheck让不同浏览器下的复选框（checkboxes）和单选按钮（radio button）更美观、功能更强。
              </p>
            </div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/bootstrap-wysiwyg/" title="bootstrap-wysiwyg" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'wysiwyg'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/bootstrap-wysiwyg.png" alt="Bootstrap WYSIWYG"></a>
            <div class="caption">
              <h3> 
                <a href="/p/bootstrap-wysiwyg/" title="bootstrap-wysiwyg" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'wysiwyg'])">bootstrap-wysiwyg<br><small>为Bootstrap定制的可视编辑器</small></a>
              </h3>
              <p>
              bootstrap-wysiwyg是一个jQuery Bootstrap插件（5KB, &lt; 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。
              </p>
            </div>
          </div>
        </div>


        <div class="col-sm-6 col-md-4 ">
          <div class="thumbnail">
            <a href="/p/chart.js/" title="Chart.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'chartjs'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/chart.js.png" alt="Chart.js"></a>
            <div class="caption">
              <h3> 
                <a href="/p/chart.js/" title="Chart.js" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'chartjs'])">Chart.js<br><small>精巧的JS图表绘制工具库</small></a>
              </h3>
              <p>
              Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
              </p>
            </div>
          </div>
        </div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/preboot/" title="Preboot" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'preboot'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/preboot.png" alt="Preboot"></a>
<div class="caption">
<h3> 
<a href="/p/preboot/" title="Preboot" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'preboot'])">Preboot<br><small>Bootstrap之前世</small></a>
</h3>
<p>
Preboot是一组用LESS语法书写的混合（mixin）和变量（variable）的集合，目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/jquery.pin/" title="jQuery.Pin" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'pin'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/jquery.pin.png" alt="jQuery.Pin"></a>
<div class="caption">
<h3> 
<a href="/p/jquery.pin/" title="jQuery.Pin" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'pin'])">jQuery.Pin<br><small>固定页面元素的jQuery插件</small></a>
</h3>
<p>
jQuery.Pin 能将任意页面元素“钉”在某个容器顶部，而且在尺寸小的屏幕上能够自动禁用这种效果。
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/responsive-nav.js/" title="响应式导航" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'navjs'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/responsive-nav.js.png" alt="Responsive Nav"></a>
<div class="caption">
<h3> 
<a href="/p/responsive-nav.js/" title="响应式导航" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'navjs'])">Responsive Nav<br><small>响应式导航</small></a>
</h3>
<p>
响应式导航（Responsive Nav）是一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bsie/" title="Bootstrap IE6兼容方案" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsie'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/bsie.png" alt="BSIE"></a>
<div class="caption">
<h3> 
<a href="/p/bsie/" title="Bootstrap IE6兼容方案" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsie'])">Bsie<br><small>Bootstrap IE6兼容方案</small></a>
</h3>
<p>
Bsie弥补了Bootstrap对IE6的不兼容。目前，bsie能在IE6上支持大部分bootstrap的特性，可惜，还有一些实在无法支持...
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/messenger/" title="非常酷的弹框(Alert)组件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'messenger'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/messenger.png" alt="Messenger"></a>
<div class="caption">
<h3> 
<a href="/p/messenger/" title="非常酷的弹框(Alert)组件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'messenger'])">Messenger<br><small>非常酷的弹框(Alert)组件</small></a>
</h3>
<p>
Messenger是一个非常酷的弹框(Alert)组件，能够非常好的与Bootstrap融合，当然，单独使用效果也是非常棒。Messenger自带4套皮肤。
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bootstrap-datetimepicker/" title="Bootstrap日期时间选择器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'datetimepicker'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/bootstrap-datetimepicker.png" alt="Bootstrap Datetimepicker"></a>
<div class="caption">
<h3> 
<a href="/p/bootstrap-datetimepicker/" title="Bootstrap日期时间选择器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'datetimepicker'])"> DateTime Picker<br><small>日期时间选择器</small></a>
</h3>
<p>
Bootstrap日期时间选择器（Bootstrap DateTime Picker）是一个Bootstrap组件，能够简化页面上日期、时间的输入。
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/jquery-ui-bootstrap/" title="基于Bootstrap样式的 jQuery UI 控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'jquibootstrap'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/jquery-ui-bootstrap.png" alt="jQuery UI Bootstrap"></a>
<div class="caption">
<h3> 
<a href="/p/jquery-ui-bootstrap/" title="基于Bootstrap样式的 jQuery UI 控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'jquibootstrap'])">jQuery UI Bootstrap <br><small>用Bootstrap美化jQuery UI</small></a>
</h3>
<p>这套工具让你在使用jQuery UI 控件时也能充分利用Bootstrap的样式，而且不会出现样式不统一的现象，Bootstrap和jQuery UI可以完美融合在一起了！</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/google-bootstrap/" title="Google风格的Bootstrap" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'googlebootstrap'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/google-bootstrap.png" alt="Google-Style Bootstrap"></a>
<div class="caption">
<h3> 
<a href="/p/google-bootstrap/" title="Google风格的Bootstrap" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'googlebootstrap'])">Google Bootstrap <br><small>Google风格的Bootstrap</small></a>
</h3>
<p>Google的UI素来以简洁著称，现在Bootstrap也来Google Style一把，喜欢Google的就来试试这套Google Bootstrap吧！</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/flat-ui/" title="Flat UI" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'flatui'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/flat-ui.png" alt="Flat UI"></a>
<div class="caption">
<h3> 
<a href="/p/flat-ui/" title="Flat UI" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'flatui'])">Flat UI<br><small>Metro风格的Bootstrap</small></a>
</h3>
<p>
Flat UI是基于Bootstrap做的Metro化改造，由<a href="http://designmodo.com/">Designmodo</a>提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/metro-ui-css/" title="Bootstrap Metro UI CSS" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'metrouicss'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/metro-ui-css.png" alt="Bootstrap Metro UI CSS"></a>
<div class="caption">
<h3> 
<a href="/p/metro-ui-css/" title="Bootstrap Metro UI CSS" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'metrouicss'])">Metro UI CSS <br><small>Bootstrap与Metro融合</small></a>
</h3>
<p>
Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式。现在，Metro UI CSS项目在Bootstrap的基础上被开发成一个独立的解决方案。
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/font-awesome/" title="Font Awesome" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'fontawesome'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/font-awesome.png" alt="Font Awesome"></a>
<div class="caption">
<h3> 
<a href="/p/font-awesome/" title="Font Awesome" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'fontawesome'])">Font Awesome <br><small>Bootstrap专用图标字体</small></a>
</h3>
<p>
Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/simple-icons/" title="Icon汇" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'simpleicons'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/simpleicons.png" alt="Simple Icons"></a>
<div class="caption">
<h3> 
<a href="/p/simple-icons/" title="Icon汇" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'simpleicons'])"> Simple Icons<br><small>Icon汇</small></a>
</h3>
<p>
Simple Icons -- Icon汇。收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友，所有Icon版权归其所属公司。
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/bootstrap-form-builder/" title="Bootstrap 在线表单构造器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsformbuilder'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/bootstrap-form-builder.png" alt="Bootstrap Form Builder"></a>
<div class="caption">
<h3> 
<a href="/p/bootstrap-form-builder/" title="Bootstrap 在线表单构造器" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'bsformbuilder'])">Bootstrap  Form Builder<br><small>在线表单构造器</small></a>
</h3>
<p>
Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于Bootstrap的完整表单，减轻了各位码农手写HTML代码的劳动，而且不会出错。
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/html5boilerplate/" title="HTML5 Boilerplate" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'h5boilerplate'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/h5bp.png" alt="HTML5 Boilerplate"></a>
<div class="caption">
<h3> 
<a href="/p/html5boilerplate/" title="HTML5 Boilerplate" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'h5boilerplate'])">HTML5 Boilerplate<br><small>专业的前端模版</small></a>
</h3>
<p>
HTML5 Boilerplate 是一套专业的前端模版，用以开发快速、健壮、适应性强的app或网站。
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/websafecolors/" title="Web安全色" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'websafecolors'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/websafecolors.png" alt="Web-Safe Colors"></a>
<div class="caption">
<h3> 
<a href="/p/websafecolors/" title="Web安全色" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'websafecolors'])">Web Safe Colors<br><small>Web安全色</small></a>
</h3>
<p>
本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="http://docs.bootcss.com/" title="Bootstrap文档全集" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'docs'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/bootstrap-docs.png" alt="Bootstrap Docs"></a>
<div class="caption">
<h3> 
<a href="http://docs.bootcss.com/" title="Bootstrap文档全集" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'docs'])">Bootstrap Docs<br><small>Bootstrap文档全集</small></a>
</h3>
<p>
这里收集了Bootstrap从V1.0.0版本到现在，整个文档的历史。Bootstrap本身就是一个传奇，而这些文档就是传奇的见证！
</p>
</div>
</div>
</div>

<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/git-guide/" title="Git简易指南" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'git'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/git-guide.png" alt="Git Guide"></a>
<div class="caption">
<h3> 
<a href="/p/git-guide/" title="git简易指南" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'git'])">Git Guide<br><small>Git简易指南</small></a>
</h3>
<p>
Git简易指南 -- 帮助你开始使用 git 的简易指南，木有高深内容，;)。
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/grumblejs/" title="气泡形状的提示（Tooltip）控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grumblejs'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/grumblejs.png" alt="Grumble.js"></a>
<div class="caption">
<h3> 
<a href="/p/grumblejs/" title="气泡形状的提示（Tooltip）控件" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'grumblejs'])">Grumble.js<br><small>气泡形状的提示（Tooltip）控件</small></a>
</h3>
<p>
一个气泡形状的提示（Tooltip）控件，可以在其围绕的元素周围做360度任意定位。
</p>
</div>
</div>
</div>


<div class="col-sm-6 col-md-4 ">
<div class="thumbnail">
<a href="/p/cikonss/" title="纯CSS实现的Icon" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'cikonss'])"><img class="lazy" src="http://static.bootcss.com/www/assets/img/null.png" width="300" height="150" data-src="http://static.bootcss.com/www/assets/img/cikonss.png" alt="Cikonss"></a>
<div class="caption">
<h3> 
<a href="/p/cikonss/" title="纯CSS实现的Icon" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'cikonss'])">CIKONSS<br><small>纯CSS实现的Icon</small></a>
</h3>
<p>
Cikonss是纯CSS实现的响应式Icon，兼容IE8+。
</p>
</div>
</div>
</div>

</div>
</div><!-- /.container -->

      <!-- FOOTER -->
    <footer class="footer ">
      <p>本网站所列开源项目的中文版文档全部由<a href="http://www.bootcss.com/">Bootstrap中文网</a>成员翻译整理，并全部遵循 <a href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>协议发布。</p>
      <p>Powered By <a href="http://www.bootcss.com/" title="Bootstrap中文网">Bootstrap</a> | <a href="http://less.bootcss.com/" title="Less中文文档">Less</a> | <a href="http://sass.bootcss.com/" title="Sass中文文档">Sass</a> | <a href="http://www.gruntjs.net/" title="Grunt中文网">Grunt</a> | <a href="http://www.ghostchina.com/" target="_blank" title="Ghost中文网">Ghost</a></p>
      <p class="hidden"><a href="http://koa.bootcss.com/" title="Koa中文文档">Koa</a> | <a href="http://jekyll.bootcss.com/" title="Jekyll中文文档">Jekyll</a></p>
      <p><a href="https://www.upyun.com" target="_blank">又拍云</a>为本站提供CDN加速服务</p>
      <p>
        <a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a> | 京公网安备11010802014853
      </p>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/unveil/1.3.0/jquery.unveil.min.js"></script>
    <script src="http://static.bootcss.com/www/assets/js/jquery.scrollUp.min.js"></script>
    <script>
      $(document).ready(function(){
        $("img.lazy").unveil();

        $.scrollUp({
              scrollName: 'scrollUp', // Element ID
              topDistance: '300', // Distance from top before showing element (px)
              topSpeed: 300, // Speed back to top (ms)
              animation: 'fade', // Fade, slide, none
              animationInSpeed: 200, // Animation in speed (ms)
              animationOutSpeed: 200, // Animation out speed (ms)
              scrollText: '', // Text for element
              activeOverlay: false  // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        });
      });
    </script>
        <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F3d8e7fc0de8a2a75f2ca3bfe128e6391' type='text/javascript'%3E%3C/script%3E"));
        </script>    
  </body>
</html>
